<template>

    <hl-page title="实名认证信息" :hidden-back="false" :hidden-tab-bar="true">
        <div class="content" slot="content">
            <cube-input class="margin" v-model="true_name" placeholder="请输入真实姓名"></cube-input>
            <cube-input class="margin" v-model="id_code" placeholder="请输入身份证号"></cube-input>
            <cube-input class="margin" v-model="phone" placeholder="请输入认证手机"></cube-input>
            <cube-input class="margin" v-model="card" placeholder="请输入银行卡号"></cube-input>
            <cube-input class="margin" v-model="bank" placeholder="请输入开户银行"></cube-input>
            <cube-input class="margin" v-model="bank_username" placeholder="请输入开户账号"></cube-input>
            <div class="margin-24">
                <cube-button @click="save()">保存认证信息</cube-button>
            </div>

        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import {Url} from "../utils/config";

    export default {
        components: {HlPage},
        name: "profile",
        data() {
            return {
                true_name: "",
                id_code: "",
                phone: "",
                card: "",
                bank: '',
                bank_username: "",
            }
        },
        computed: {
            profile() {
                let profile = this.$store.state.user.profile
                if (profile){
                    this.true_name = profile.true_name
                    this.id_code = profile.id_code
                    this.phone = profile.phone
                    this.card = profile.card
                    this.bank = profile.bank
                    this.bank_username = profile.bank_username
                }
                return profile
            }
        },
        methods: {
            save() {
                if (this.profile) {
                    this.$createDialog({
                        type: 'confirm',
                        icon: 'cubeic-alert',
                        title: '提示',
                        content: '更新资料将重置认证状态，是否更新',
                        confirmBtn: {
                            text: '确定',
                            active: true,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        cancelBtn: {
                            text: '取消',
                            active: false,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        onConfirm: () => {
                            this.requestSave()
                        },
                        onCancel: () => {

                        }
                    }).show()
                } else {
                    this.requestSave()
                }
            },
            requestSave() {
                const toast = this.$createToast({
                    time: 0,
                    text: '正在保存'
                })
                toast.show();
                this.$post(Url.profile+"/save", {
                    true_name: this.true_name,
                    id_code: this.id_code,
                    card: this.card,
                    bank: this.bank,
                    phone:this.phone,
                    bank_username: this.bank_username
                }).then((res) => {
                    toast.hide()
                    this.$createDialog({
                        type: 'alert',
                        title: '提交成功',
                        content: `提交认证成功,请等待审核`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {

                        }
                    }).show()
                    // console.log(error);
                }).catch((error) => {
                    toast.hide()
                    this.$createToast({
                        txt: error,
                        type: 'error'
                    }).show();
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .margin {
        margin: 12px 12px;
    }

    .margin-24 {
        margin: 24px;
    }
</style>